<template>
  <view class="card" @click="gotoCustomerList(1)">
    <view class="title_box">
      <view>简报</view>
    </view>
    <view class="content_box">
      <u-row justify="space-between">
        <u-col span="4" textAlign="center">
          <view class="border">
            <view class="head_title">客资数</view>
            <view class="box_num orange">{{ info.customerResourceCount }}</view>
          </view>
        </u-col>
        <u-col span="4" textAlign="center">
          <view class="border">
            <view class="head_title">5000链接</view>
            <view class="box_num orange">{{ info.fiveLinkCount }}</view>
          </view>
        </u-col>
        <u-col span="4" textAlign="center">
          <view>
            <view class="head_title">1000链接</view>
            <view class="box_num red">{{ info.oneLinkCount }}</view>
          </view>
        </u-col>
      </u-row>
    </view>
    <view class="content_box">
      <u-row justify="space-between">
        <u-col span="4" textAlign="center">
          <view class="border">
            <view class="head_title">总链接</view>
            <view class="box_num orange">{{ info.linkCount }}</view>
          </view>
        </u-col>
        <u-col span="4" textAlign="center">
          <view class="border">
            <view class="head_title">转化率</view>
            <view class="box_num orange">{{ (info.convertRate*100).toFixed(0) }}%</view>
          </view>
        </u-col>
        <u-col span="4" textAlign="center">
          <view>
            <view class="head_title">排名</view>
            <view class="box_num red">{{ info.ranking }}</view>
          </view>
        </u-col>
      </u-row>
    </view>
    <!-- <view class="bottom_box">
      <u-row justify="space-between">
        <u-col span="3" textAlign="center">
          <view>
            <view class="bottom_title" >
              <text>总链接</text>
              <u-icon name="arrow-right" size="10"></u-icon>
            </view>
            <view class="bottom_num blue">{{ info.lockCount }}</view>
          </view>
        </u-col>
        <u-col span="3" textAlign="center">
          <view>
            <view class="bottom_title" >
              <text>转化率</text>
              <u-icon name="arrow-right" size="10"></u-icon>
            </view>
            <view class="bottom_num blue">{{ info.documentationCount }}</view>
          </view>
        </u-col>
        <u-col span="3" textAlign="center">
          <view>
            <view class="bottom_title">
              <text>排名</text>
              <u-icon name="arrow-right" size="10"></u-icon>
            </view>
            <view class="bottom_num red">{{ info.orderFormCount }}</view>
          </view>
        </u-col>
        <u-col span="3" textAlign="center">
          <view>
            <view class="bottom_title">
              <text>升单数</text>
              <u-icon name="arrow-right" size="10"></u-icon>
            </view>
            <view class="bottom_num blue">{{ info.upgradeOrderCount }}</view>
          </view>
        </u-col>
      </u-row>
      <u-row justify="space-between">
        <u-col span="3" textAlign="center">
          <view>
            <view class="small_title">
              <text>总成单率</text>
            </view>
            <view class="small_num"
              >{{ info.orderFormRate ? info.orderFormRate : 0 }} %</view
            >
          </view>
        </u-col>
        <u-col span="3" textAlign="center">
          <view>
            <view class="small_title">
              <text>1个月成单率</text>
            </view>
            <view class="small_num"
              >{{
                info.oneMonthOrderFormRate ? info.oneMonthOrderFormRate : 0
              }}
              %</view
            >
          </view>
        </u-col>
        <u-col span="3" textAlign="center">
          <view>
            <view class="small_title">
              <text>2个月成单率</text>
            </view>
            <view class="small_num"
              >{{
                info.twoMonthOrderFormRate ? info.twoMonthOrderFormRate : 0
              }}
              %</view
            >
          </view>
        </u-col>
        <u-col span="3" textAlign="center">
          <view>
            <view class="small_title">
              <text>3个月成单率</text>
            </view>
            <view class="small_num"
              >{{
                info.threeMonthOrderFormRate ? info.threeMonthOrderFormRate : 0
              }}
              %</view
            >
          </view>
        </u-col>
      </u-row>
    </view> -->
  </view>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  methods: {
    /**
     * 跳转客户列表
     */
    gotoCustomerList(type) {
      // 1锁单 2跟单 4奖励客资
      uni.navigateTo({
        url: "/pages/customer/myCustomerList?type="+type,
      });
    },
  },
  onShow() {},
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>

<style lang="scss" scoped>
.card {
  padding: 24rpx;
  background: #fff;
  border-radius: 18rpx;
  box-sizing: border-box;
  .title_box {
    font-size: 28rpx;
    font-weight: bolder;
    color: #1c1b26;
    margin-bottom: 24rpx;
  }
  .content_box {
    width: 100%;
    padding: 39rpx 20rpx;
    background-color: #f5f7fa;
    box-sizing: border-box;
    border-radius: 8rpx;
    // margin-bottom: 40rpx;
    .border {
      border-right: 1px solid #e5e2e2;
    }
    .head_title {
      font-size: 24rpx;
      color: #1c1b26;
      margin-bottom: 4rpx;
    }
    .box_num {
      font-size: 40rpx;
      font-weight: bold;
    }
  }
}
.bottom_box {
  .bottom_title {
    display: flex;
    font-size: 24rpx;
    color: #1c1b26;
    margin-bottom: 4rpx;
    justify-content: flex-end;
    margin-bottom: 19rpx;
    text {
      margin-right: 20rpx;
    }
  }
  .bottom_num {
    font-size: 24rpx;
    font-weight: bold;
  }
  .small_title {
    color: #9ea5b2;
    font-size: 22rpx;
    margin-top: 40rpx;
    margin-bottom: 11rpx;
  }
  .small_num {
    font-size: 22rpx;
  }
}
.blue {
  color: #3c99fd;
}
.orange {
  color: #f98152;
}
.red {
  color: #a22c26;
}
</style>
